<!-- el-image-viewer这个组件官方没有单独拿出来 但它也具有el-image的属性 -->
<template>
  <div class="image-viewer">
    <el-image-viewer
      :initial-index="previewImageIndex"
      :hide-on-click-modal="true"
      :url-list="imageList"
      @close="closeImgViewer"
      v-if="previewImageIndex != null"
    ></el-image-viewer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const previewImageIndex = ref(null);
const props = defineProps({
  imageList: {
    type: Array,
    default: () => [],
  },
  index: {
    type: Number,
    default: 0,
  },
});
const show = (index) => {
  stopScroll();
  previewImageIndex.value = index;
};
defineExpose({
  show,
});
const closeImgViewer = () => {
  startScroll();
  previewImageIndex.value = null;
};
//禁止滚动
const stopScroll = (e) => {
  document.body.style.overflow = "hidden";
};
//开始滚动
const startScroll = (e) => {
  document.body.style.overflow = "auto";
};
</script>

<style lang="scss" scoped>
.image-viewer {
  .el-image-viewer__mask {
    opacity: 0.7;
  }
}
</style>
